<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="assets/css/map.css" rel="stylesheet">
		<link href="assets/css/leaflet.css" rel="stylesheet">
		<link href="assets/css/leaflet.pm.css" rel="stylesheet">
		<title>leaflet</title>
	</head>

	<body>

		<div id="map"></div>
		<div class="btns" style="text-align: center;margin-top: 20px;">
			<button onclick="edit()">编辑面</button>
			<button onclick="complete()">完成编辑</button>
		</div>

		<script src="assets/js/leaflet.js"></script>
		<script src="assets/js/leaflet.pm.min.js"></script>
		<script>
			let map = L.map("map", {
				zoom: 12,
				maxZoom: 18,
				center: [34.269701076858354, 108.94729614257814],
			});
			L.tileLayer(
				"http://{s}.tile.osm.org/{z}/{x}/{y}.png"
			).addTo(map);
			const path = [{
				"lat": 34.294948419549335,
				"lng": 108.93940546535963
			}, {
				"lat": 34.239905136147776,
				"lng": 108.98607923668818
			}, {
				"lat": 34.22684835281174,
				"lng": 108.92018685363611
			}, {
				"lat": 34.264310212432044,
				"lng": 108.87282670331743
			}, {
				"lat": 34.296933843873816,
				"lng": 108.88758385160514
			}]
			const polygon = L.polygon(path, {
				weight: 2,
				color: "rgb(53, 146, 241)",
				fillColor: 'rgb(53, 146, 241)',
				opacity: 0.8,
				fillOpacity: 0.4,
			});
			polygon.addTo(map)
			// 编辑面
			function edit(){
				polygon.pm.enable();
				polygon.on('pm:edit', e => {
				  const { target } = e;
				  const latlng = target.getLatLngs()[0];
				  console.log('编辑后的坐标列表',latlng)
				});
			}
			// 完成编辑
			function complete(){
				polygon.pm.disable()
			}
		</script>
	</body>

</html>